<!DOCTYPE html>
<html>
<head>
    <title>菜单管理</title>
    <meta charset="utf-8">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input, .form-group select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .btn {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn:hover {
            background-color: #0056b3;
        }
        .btn-danger {
            background-color: #dc3545;
        }
        .btn-danger:hover {
            background-color: #c82333;
        }
        .menu-tree {
            margin-top: 20px;
        }
        .menu-item {
            padding: 10px;
            border: 1px solid #eee;
            margin-bottom: 5px;
            border-radius: 4px;
        }
        .menu-item.children {
            background-color: #f8f9fa;
        }
        .menu-item .actions {
            float: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>菜单管理</h1>
        
        <div>
            <h2>添加/编辑菜单</h2>
            <form id="menuForm">
                <input type="hidden" id="menuId">
                <div class="form-group">
                    <label for="menuName">菜单名称:</label>
                    <input type="text" id="menuName" required>
                </div>
                <div class="form-group">
                    <label for="menuPath">路由路径:</label>
                    <input type="text" id="menuPath" required>
                </div>
                <div class="form-group">
                    <label for="menuComponent">组件路径:</label>
                    <input type="text" id="menuComponent">
                </div>
                <div class="form-group">
                    <label for="menuIcon">图标:</label>
                    <input type="text" id="menuIcon">
                </div>
                <div class="form-group">
                    <label for="menuParentId">父级ID:</label>
                    <input type="number" id="menuParentId" value="0">
                </div>
                <div class="form-group">
                    <label for="menuOrderNum">排序号:</label>
                    <input type="number" id="menuOrderNum" value="0">
                </div>
                <div class="form-group">
                    <label for="menuStatus">状态:</label>
                    <select id="menuStatus">
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="menuPermission">权限标识:</label>
                    <input type="text" id="menuPermission">
                </div>
                <div class="form-group">
                    <label for="menuType">类型:</label>
                    <select id="menuType">
                        <option value="0">目录</option>
                        <option value="1">菜单</option>
                        <option value="2">按钮</option>
                    </select>
                </div>
                <button type="submit" class="btn">保存菜单</button>
                <button type="button" class="btn btn-danger" id="cancelEdit">取消编辑</button>
            </form>
        </div>
        
        <div class="menu-tree">
            <h2>菜单列表</h2>
            <button id="refreshMenus" class="btn">刷新菜单</button>
            <div id="menuList"></div>
        </div>
    </div>

    <script>
        // 全局变量
        let menus = [];
        let editingMenuId = null;
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadMenus();
            
            // 绑定事件
            document.getElementById('menuForm').addEventListener('submit', saveMenu);
            document.getElementById('refreshMenus').addEventListener('click', loadMenus);
            document.getElementById('cancelEdit').addEventListener('click', cancelEdit);
        });
        
        // 加载菜单列表
        function loadMenus() {
            fetch('/menu/list', {  })
            .then(response => response.json())
            .then(result => {
                menus = result.data || [];
                renderMenuTree(menus);
            })
            .catch(error => {
                console.error('加载菜单失败:', error);
                menus = []; // 确保menus是一个数组
                renderMenuTree([]);
                alert('加载菜单失败');
            });
        }
        
        // 渲染菜单树
        function renderMenuTree(menuData) {
            const menuList = document.getElementById('menuList');
            menuList.innerHTML = '';
            
            function renderMenu(menu, level = 0) {
                const menuItem = document.createElement('div');
                menuItem.className = 'menu-item';
                if (menu.children && menu.children.length > 0) {
                    menuItem.classList.add('children');
                }
                menuItem.style.marginLeft = (level * 20) + 'px';
                
                const actions = `
                    <div class="actions">
                        <button onclick="editMenu(${menu.id})" class="btn">编辑</button>
                        <button onclick="deleteMenu(${menu.id})" class="btn btn-danger">删除</button>
                    </div>
                `;
                
                menuItem.innerHTML = `
                    <strong>${menu.name}</strong> - ${menu.path} 
                    ${menu.permission ? `(${menu.permission})` : ''}
                    ${menu.status === 1 ? '(启用)' : '(禁用)'}
                    ${actions}
                `;
                
                menuList.appendChild(menuItem);
                
                // 渲染子菜单
                if (menu.children && menu.children.length > 0) {
                    menu.children.forEach(child => renderMenu(child, level + 1));
                }
            }
            
            menuData.forEach(menu => renderMenu(menu));
        }
        
        // 保存菜单
        function saveMenu(event) {
            event.preventDefault();
            
            const menuData = {
                name: document.getElementById('menuName').value,
                path: document.getElementById('menuPath').value,
                component: document.getElementById('menuComponent').value,
                icon: document.getElementById('menuIcon').value,
                parentId: parseInt(document.getElementById('menuParentId').value),
                orderNum: parseInt(document.getElementById('menuOrderNum').value),
                status: parseInt(document.getElementById('menuStatus').value),
                permission: document.getElementById('menuPermission').value,
                type: parseInt(document.getElementById('menuType').value)
            };
            
            const url = editingMenuId ? `/menu` : `/menu`;
            const method = editingMenuId ? 'PUT' : 'POST';
            
            if (editingMenuId) {
                menuData.id = editingMenuId;
            }
                        
            fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(menuData)
            })
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    throw new Error('保存失败');
                }
            })
            .then(() => {
                alert('保存成功');
                cancelEdit();
                loadMenus();
            })
            .catch(error => {
                console.error('保存失败:', error);
                alert('保存失败');
            });
        }
        
        // 编辑菜单
        function editMenu(id) {
            const menu = menus.find(m => m.id === id);
            if (menu) {
                document.getElementById('menuId').value = menu.id;
                document.getElementById('menuName').value = menu.name;
                document.getElementById('menuPath').value = menu.path;
                document.getElementById('menuComponent').value = menu.component || '';
                document.getElementById('menuIcon').value = menu.icon || '';
                document.getElementById('menuParentId').value = menu.parentId;
                document.getElementById('menuOrderNum').value = menu.orderNum;
                document.getElementById('menuStatus').value = menu.status;
                document.getElementById('menuPermission').value = menu.permission || '';
                document.getElementById('menuType').value = menu.type;
                
                editingMenuId = id;
                document.getElementById('menuForm').scrollIntoView();
            }
        }
        
        // 删除菜单
        function deleteMenu(id) {
            if (confirm('确定要删除这个菜单吗？')) {
                
                fetch(`/menu/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => {
                    if (response.ok) {
                        alert('删除成功');
                        loadMenus();
                    } else {
                        throw new Error('删除失败');
                    }
                })
                .catch(error => {
                    console.error('删除失败:', error);
                    alert('删除失败');
                });
            }
        }
        
        // 取消编辑
        function cancelEdit() {
            document.getElementById('menuForm').reset();
            document.getElementById('menuId').value = '';
            editingMenuId = null;
        }
        
    </script>
</body>
</html>